<template>
	<div>
		<div class="cp-header">
			<div class="cp-main-box">
				<a href="/" class="cp-logo">
					<!-- 主页logo -->
					<img src="../../public/img/logo.png">
				</a>
				<div class="layui-nav headerRight" lay-filter="">
					<!-- 搜索框 -->
					<div class="cp-header-search">
						<input id="searchBox" @keyup="search" placeholder="可以搜索书名哦！" v-model="searchContent">
						<a :href="'/seach/' + searchContent" class="iconfont icon-search"></a>
					</div>

					<div class="cp-header-link">
						<!-- 跳转充值页面 -->
						<a href="javascript:"></a>
						<a href="javascript:"></a>
						<a href="javascript:"></a>
						<a href="javascript:"></a>
						<a href="javascript:"></a>
					</div>
					<div class="cp-header-user" id="cpHeaderUser" v-show="!logged">
						<a href="/register">注册</a>
						<span></span>
						<a href="" @click.prevent="loginDialogVisible = true">登录</a>
					</div>
					<div class="layui-nav-item" id="userMsgBox" v-show="logged" style="">
						<!-- 跳转用户个人中心 -->
						<a href="/user/info">
							<i class="iconfont icon-dengpao"></i>
							<!-- 用户头像（可选） -->
							<img src="/img/default_head.png" class="layui-nav-img header">
							<!-- 用户名 -->
							<span class="userName cp-ellipsis" v-text="userName"></span>
							<!-- 更多 -->
							<span class="layui-nav-more"></span>
						</a>

						<dl class="layui-nav-child" id="userMsgChild">
							<dd>
								<a href="javascript:;">
									<i class="iconfont icon-tuichu"></i>
									退出
								</a>
							</dd>
						</dl>
					</div>
				</div>
			</div>
			<!-- 模态框 -->
			<el-dialog :close-on-click-modal="false" title="用户登录" :visible.sync="loginDialogVisible" width="20%">
				<el-form :model="loginForm" status-icon ref="ruleForm" label-width="0" class="demo-ruleForm">
					<el-form-item prop="tel">
						<el-input v-model.number="loginForm.userTel" placeholder="请输入电话"></el-input>
					</el-form-item>
					<el-form-item prop="password">
						<el-input type="password" v-model="loginForm.password" autocomplete="off" placeholder="请输入密码"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="singIn">立即登录</el-button>
					</el-form-item>
				</el-form>
			</el-dialog>
		</div>


		<div id="vueBox" class="cp-main-box" style="margin-top: 10px;">
			<template>
				<el-table :data="books" style="width: 100%">
					<el-table-column label="作品" width="80">
						<template slot-scope="scope">
							<img :src="scope.row.image" style="height: 80px;width: 60px;" />
						</template>
					</el-table-column>
					<el-table-column width="160">
						<template slot-scope="scope">
							<span style="margin-left: 10px"><a :href="'/novel/' + scope.row.bookId">{{ scope.row.bookName }}</a></span>
						</template>
					</el-table-column>
					<el-table-column label="作品描述" width="380">
						<template slot-scope="scope">
							<span style="margin-left: 10px">{{ scope.row.description }}</span>
						</template>
					</el-table-column>
					<el-table-column label="作品状态" width="150">
						<template slot-scope="scope">
							<i class="el-icon-magic-stick"></i>
							<span style="margin-left: 10px">{{ scope.row.status==1?"连载中":"已完结" }}</span>
						</template>
					</el-table-column>
					<el-table-column label="最新更新" width="200">
						<template slot-scope="scope">
							<el-popover trigger="hover" placement="top">
								<p>最新更新时间: {{ scope.row.updateTime }}</p>
								<p>作者开文时间: {{ scope.row.createTime }}</p>
								<div slot="reference" class="name-wrapper">
									<el-tag size="medium">{{ scope.row.updateTime }}</el-tag>
								</div>
							</el-popover>
						</template>
					</el-table-column>
				</el-table>
			</template>
		</div>

		<Footer></Footer>
	</div>
</template>

<script>
	import Footer from '../components/Footer'
	import $ from "jquery";
	export default {
		name: 'Category',
		components: {
			Footer
		},
		data() {
			return {
				// 登录模态框可见
				loginDialogVisible: false,
				// 登录表单
				loginForm: {
					userTel: "",
					password: ""
				},
				// 搜索内容
				searchContent: "",
				books: []				
			}
		},
		computed: {
			// 登录状态
			logged: function() {
				return (this.userName != null);
			},
			// 用户名
			userName: function() {
				return sessionStorage.getItem("userName");
			}
		},
		methods: {
			// 搜索
			search() {

			},
			// 登录
			singIn() {
				let _this = this;
				$.ajax({
					url: "http://localhost/user/login",
					type: "POST",
					data: _this.loginForm,
					success: function(res) {
						// 判断响应码
						if (res.code != 200) {
							// 错误提示信息
							_this.$message.error(res.message);
							return;
						}
						// 登录成功提示信息
						_this.$message.success("登录成功");
						// 关闭模态框
						_this.loginDialogVisible = false;
						// 将返回数据存入session
						sessionStorage.setItem("userId", res.data.userId);
						sessionStorage.setItem("userName", res.data.userName);
						// 存入作者Id
						if (res.data.authorId != null) {
							sessionStorage.setItem("authorId", res.data.authorId);
						}
						// 刷新
						location.reload();
					}
				});
			},
			logout() {
				sessionStorage.clear();
				location.reload();
			}
		},
		mounted() {
			var _this = this
			layui.use('element');
			// 获取地址栏传递的分类id
			let params = this.$route.params.pathMatch;
			$(".cp-nav-item").addClass('active').css('color', 'rgb(81, 194, 154)');
			$.ajax({
				url: "http://localhost/book/" + this.$route.params.pathMatch,
				type: "GET",
				success(data) {
					console.log(data.data.books);
					_this.books= data.data.books;
				}
			});
		}
	}
</script>

<style scoped>
	.el-button {
		background-color: #51c29a;
		border: #51c29a 1px solid;
		width: 100%;
		border-radius: 3px;
	}

	.el-button:hover {
		background-color: #7adbbb;
		border: #7adbbb solid 1px;
	}

	.loginBoxTitle {
		bottom: 20px;
	}
</style>
